<template>
  <!-- 公共头部 -->
  <div class="common_header">
    <!-- 左 -->
    <div class="header_left" @click="goBack">
      <img src="@/assets/common/return_icon.png" alt="" />
    </div>
    <!-- 标题 -->
    <div class="header_title" v-if="!isTitle">{{ title }}</div>
    <div class="header_title" v-else>
      <slot name="center"></slot>
    </div>
    <!-- 右 -->
    <div class="header_right" @click="onClick">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import { useRouter } from "vue-router";

// 获取路由信息
const router = useRouter();
// 获取父组件传递的属性和方法
const props = defineProps(["title", "isBack", "isTitle"]);
const emits = defineEmits(["back", "records"]);

// 返回上一级菜单
const goBack = () => {
  if (props.isBack) {
    emits("back");
  } else {
    router.back();
  }
};

// 监听头部右侧图标时间
const onClick = () => {
  emits("records");
};
</script>

<style lang="scss" scoped>
.common_header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: space-between;
  background-color: #030303;
  z-index: 1;
  .header_title {
    display: flex;
    align-items: center;
  }
  .header_left,
  .header_right {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
  }
}
</style>
